<template>
	<view class="container">
		<view class="img-container">
			<image class="img" src="../../static/logo.png"></image>
		</view>
		<view class="img-text">车管通销售版 2.0</view>
		<form action="" @submit="loginFormSubmit">
			<view class="input-item">
				<view class="icon iconfont iconmy"></view>
				<view class="input-box">
					<input class="input" placeholder="请输入用户名" type="text" name="username" v-model="username" @input="userInput"
					 maxlength="30" placeholder-class="pla-class">
				</view>
				<view class="right">
					<view v-if="isShowUserClose" @click="userClear" class="icon iconfont iconroundclose"></view>
				</view>
			</view>

			<view class="input-item">
				<view class="icon iconfont iconlock"></view>
				<view class="input-box">
					<input class="input" placeholder="请输入密码" type="password" name="password" v-model="password" @input="passInput"
					 maxlength="30" placeholder-class="pla-class">
				</view>

				<view class="right">
					<view v-if="isShowPassClose" @click="passClear" class="icon iconfont iconroundclose"></view>
				</view>
			</view>


			<view class="button-container">
				<button class="button" form-type="submit">登录</button>
			</view>
			<view class="tip">登录即同意<text class="is-link">《用户服务协议》</text></view>
		</form>


		<view class="footer">
			<view class="footer-item">联系客服</view>
			<view class="footer-item">使用帮助</view>
			<view class="footer-item">修改密码</view>
		</view>
	</view>
</template>

<script>
	const FormValidation = require('../../utils/formValidation');
	const util = require('../../utils/util');
	const api = require('../../utils/api');
	export default {
		data() {
			return {
				username: '', //用户名
				password: '', //密码
				isShowUserClose: false, //是否显示用户清除按钮
				isShowPassClose: false, //是否显示密码清除按钮
			}
		},
		onLoad() {
			let self = this;
			//初始化验证
			this.initValidate();
			self.$store.dispatch('device/setDeviceInfo').then(function(res) {
				console.log('设备信息写入成功');
			})
		},
		onShow(){
			let userId=uni.getStorageSync('userId');
			//如果登录成功直接到首页
			if(userId){
				uni.redirectTo({
					url:'/pages/index/index'
				})
			}
		},
		methods: {
			/**
			 * 验证初始化
			 */
			initValidate() {
				// 验证字段的规则
				const rules = {
					username: {
						required: true
					},
					password: {
						required: true,
						// minlength: 6
					}
				};

				// 验证字段的提示信息，若不传则调用默认的信息
				const messages = {
					username: {
						required: '请输入用户名'
					},
					password: {
						required: '请输入密码',
						// minlength: '密码长度不少于6位',
					}
				};

				// 创建实例对象
				this.FrmValidate = new FormValidation(rules, messages)
			},
			/**
			 * 表单提交
			 */
			loginFormSubmit(e) {
				const data = e.detail.value;
				// 传入表单数据，调用验证方法
				if (!this.FrmValidate.checkForm(data)) {
					const error = this.FrmValidate.errorList[0];
					uni.showToast({
						title: error.msg,
						icon: 'none'
					})
					return false
				}

				this.username = data.username;
				this.password = data.password;
				//登录
				this.login();
			},
			/**
			 * 用户账号监听
			 */
			userInput(e) {
				let value = e.detail.value;
				value ? this.isShowUserClose = true : this.isShowUserClose = false;
			},
			/**
			 * 密码监听
			 */
			passInput(e) {
				let value = e.detail.value;
				value ? this.isShowPassClose = true : this.isShowPassClose = false;
			},
			/**
			 * 账号清除
			 */
			userClear() {
				this.username = '';
				this.isShowUserClose = false
			},
			/**
			 * 密码清除
			 */
			passClear() {
				this.password = '';
				this.isShowPassClose = false
			},
			/**
			 * 登录
			 */
			login() {
				let self=this;
				let temp = {
					username: this.username, //用户名
					password: this.password //密码
				};
				let info = {};
				Object.assign(info,self.$store.state.device.deviceInfo,temp);
				console.log(info);
				self.$store.dispatch('user/loginState',info).then(function(res) {
					console.log(res);
					let rdata=res.data;
					if(rdata.status==0&&rdata.data){
						console.log('用户信息写入成功');
						uni.switchTab({
							url:'/pages/index/index'
						})
					}else{
						uni.showToast({
							title:rdata.message,
							icon:'none'
						})
					}
					
				}).catch(function(err){
					uni.showToast({
						title:err.message,
						icon:'none'
					})
				})

				
			}
		}
	}
</script>

<style>
	.container {
		padding: 0 30upx;
	}

	.img-container {
		padding: 210upx 0 30upx 0;
	}

	.img-container .img {
		display: block;
		width: 140upx;
		height: 140upx;
		border-radius: 14upx;
		margin: 0 auto;
	}

	.img-text {
		font-size: 34upx;
		text-align: center;
		color: #333;
		margin-bottom: 60upx;
	}

	.input-item {
		display: flex;
		align-items: center;
		border: 1px solid #ccc;
		border-radius: 10upx;
		width: 100%;
		height: 80upx;
		margin-bottom: 40upx;
	}

	.input-item:hover {
		border-color: #3c67c2;
		box-shadow: 0 0 6upx #3c67c2;
	}

	.input-item .icon.iconmy,
	.input-item .icon.iconlock {
		flex: 1;
		font-size: 40upx;
		color: #666;
		text-align: center;
		line-height: 80upx;
	}

	.input-item .input-box {
		flex: 8;
	}

	.input-item .input-box .input {
		width: 100%;
		padding: 20upx 10upx;
		font-size: 32upx;
		color: #333;
	}

	.input-item .right {
		flex: 1;
		text-align: center;
	}

	.input-item .right .icon {
		font-size: 40upx;
		color: #999;
		line-height: 80upx;
	}

	.button-container {
		box-sizing: border-box;
		width: 100%;
		padding: 20upx 0;
	}

	.button-container .button {
		box-sizing: border-box;
		width: 100%;
		height: 80upx;
		font-size: 32upx;
		background-color: #3c67c2;
		border-radius: 10upx;
		line-height: 80upx;
		text-align: center;
		color: #fff;
	}

	.tip {
		background-color: #ebf5ff;
		font-size: 24upx;
		color: #666;
		padding: 14upx 10upx;
		border-radius: 8upx;
		text-align: center;
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 90upx;
	}

	.footer .footer-item {
		position: relative;
		flex: 1;
		font-size: 28upx;
		text-align: center;
		color: #666;
	}

	.footer .footer-item:after {
		position: absolute;
		right: 0;
		top: 6upx;
		content: '';
		width: 2upx;
		height: 30upx;
		background-color: #ccc;
	}

	.footer .footer-item:last-child:after {
		display: none;
	}
</style>
